<template>
  <div style="height: calc(100% - 60px);overflow-y: hidden;">
    <div class="left" style="height: 100%" ref="viz" id="viz">

    </div>
  </div>
</template>

<script>
import Vis from "@/plugins/vis";
import {Neo4jQueryApi} from "@/api/neo4jQueryApi";

export default {
  name: "GraphPanel",
  data() {
    return {
      network: null,
    }
  },

  methods: {
    async draw() {
      let container = this.$refs.viz;
      const result = await Neo4jQueryApi.query({});
      let data = {
        nodes: result.nodes,
        edges: []
      }
      this.network = new Vis.Network(container, data, result.options);

      //鼠标悬浮
      this.network.on('click', (e) => {
        console.log(e);
      })

      this.network.on('hoverNode', (e) => {
        e.event.target.style.cursor = 'pointer';
      })
      this.network.on("blurNode", (e) => {
        e.event.target.style.cursor = '';
      })
    },

    redraw() {
      this.draw();
    }
  },
  mounted() {
    this.draw();
  }
}
</script>

<style scoped>

</style>
